import { useParams, Link } from 'react-router-dom';
import { ClockIcon, ArrowLeftIcon, BookOpenIcon } from 'lucide-react';
import { usePageTitle } from '../hooks/usePageTitle';
import { ImageWithLoader } from '../components/ImageWithLoader';

export function GuideDetail() {
  const {
    id
  } = useParams<{
    id: string;
  }>();
  // Mock data for guides - in a real app, this would come from an API
  const guides = {
    '1': {
      title: 'Smart Refrigerator Buying Guide',
      image: 'https://images.unsplash.com/photo-1556911220-bff31c812dba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2068&q=80',
      category: 'Kitchen',
      readTime: '12 min read',
      author: 'Alex Chen',
      authorImage: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
      publishDate: 'June 15, 2023',
      introduction: 'Smart refrigerators represent the cutting edge of kitchen technology, combining traditional food storage with connected features that can transform your cooking and shopping experience. This comprehensive guide will help you navigate the options and find the perfect smart refrigerator for your home.',
      sections: [{
        title: 'Understanding Smart Refrigerator Technology',
        content: 'Modern smart refrigerators offer features like interior cameras, touchscreen displays, voice control, and smartphone connectivity. These features allow you to check the contents of your fridge remotely, create shopping lists, follow recipes, and even order groceries directly from your refrigerator door.'
      }, {
        title: 'Key Features to Consider',
        content: 'When shopping for a smart refrigerator, consider these essential features: interior organization flexibility, temperature control precision, energy efficiency ratings, ice and water dispenser options, and connectivity with other smart home systems like Amazon Alexa or Google Home.'
      }, {
        title: 'Configuration Options',
        content: 'Smart refrigerators come in several configurations: French door, side-by-side, bottom freezer, and door-in-door designs. French door models offer the most space and accessibility, while door-in-door designs provide convenient access to frequently used items without opening the main compartment.'
      }, {
        title: 'Top Smart Refrigerator Brands',
        content: 'Leading manufacturers include Samsung with their Family Hub series, LG with InstaView technology, and GE with their Profile series. Each brand offers unique features and design elements that cater to different needs and preferences.'
      }],
      conclusion: 'A smart refrigerator is a significant investment that can enhance your kitchen experience for years to come. By considering your space requirements, must-have features, and budget constraints, you can find a model that perfectly balances innovation with practicality for your home.',
      relatedGuides: ['2', '5', '7']
    },
    '2': {
      title: 'Washing Machine Technology Comparison',
      image: 'https://images.unsplash.com/photo-1626806787461-102c1bfaaea1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2071&q=80',
      category: 'Laundry',
      readTime: '15 min read',
      author: 'Sarah Johnson',
      authorImage: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
      publishDate: 'May 22, 2023',
      introduction: 'With so many washing machine options on the market, choosing the right one for your needs can be overwhelming. This guide breaks down the key differences between front-loading and top-loading machines, explains advanced features like steam cleaning and smart connectivity, and helps you determine which technology is best for your specific laundry needs.',
      sections: [{
        title: 'Front-Load vs. Top-Load Washers',
        content: 'Front-loading machines generally offer superior cleaning performance, water efficiency, and gentler fabric care. Top-loading machines provide easier loading/unloading, shorter cycle times, and typically lower upfront costs. Your choice should depend on space constraints, budget, and laundry priorities.'
      }, {
        title: 'Steam Technology Benefits',
        content: 'Steam features in modern washing machines provide enhanced stain removal, allergen reduction, and wrinkle prevention. The high-temperature steam penetrates fabrics more effectively than water alone, delivering a deeper clean while using less water and energy.'
      }, {
        title: 'Smart Connectivity Features',
        content: 'WiFi-enabled washing machines allow you to start, stop, and monitor cycles remotely, receive maintenance alerts, and download specialized wash cycles. Some models can even automatically order detergent when supplies run low or adjust settings based on local water hardness.'
      }, {
        title: 'Water and Energy Efficiency',
        content: 'Look for ENERGY STAR certification and pay attention to water consumption ratings. Modern high-efficiency washers can save thousands of gallons of water annually compared to older models, with front-loaders typically being the most efficient option available.'
      }],
      conclusion: "The best washing machine technology for your home depends on your specific needs, space constraints, and budget. Consider how each feature addresses your pain points - whether that's caring for delicate fabrics, managing large family loads, or maximizing efficiency in a small space.",
      relatedGuides: ['8', '3', '6']
    },
    '3': {
      title: 'Home Security System Integration Guide',
      image: 'https://images.unsplash.com/photo-1558002038-1055907df827?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
      category: 'Security',
      readTime: '18 min read',
      author: 'Michael Torres',
      authorImage: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
      publishDate: 'April 10, 2023',
      introduction: 'Creating a comprehensive home security system involves more than just installing cameras and sensors. This guide explores how to integrate various security components into a cohesive system that works seamlessly with your existing smart home setup, providing both protection and convenience.',
      sections: [{
        title: 'Security System Components',
        content: "A complete home security system typically includes door/window sensors, motion detectors, security cameras, smart locks, video doorbells, glass break sensors, and a central hub or monitoring service. The right combination depends on your home's layout and specific security concerns."
      }, {
        title: 'Smart Home Integration',
        content: 'Modern security systems can integrate with platforms like Apple HomeKit, Google Home, and Amazon Alexa. This allows for voice control, automated routines (like lights turning on when motion is detected), and centralized management of all your smart devices.'
      }, {
        title: 'Wired vs. Wireless Systems',
        content: "Wireless systems offer easier installation and flexibility, while wired systems provide more reliability and don't require battery changes. Many homeowners opt for hybrid systems that combine hardwired components for critical areas with wireless devices for extended coverage."
      }, {
        title: 'Professional vs. DIY Monitoring',
        content: 'Self-monitored systems send alerts directly to your smartphone, giving you control but requiring you to respond to emergencies. Professional monitoring services provide 24/7 oversight and can dispatch emergency services when needed, typically for a monthly fee.'
      }],
      conclusion: 'The most effective home security system is one that balances comprehensive protection with practical usability. By thoughtfully integrating security devices with your broader smart home ecosystem, you can create a system that not only protects your home but also enhances your daily living experience.',
      relatedGuides: ['10', '8', '6']
    },
    '4': {
      title: 'Air Purifier Technical Comparison',
      image: 'https://images.unsplash.com/photo-1594142243342-41d20b96e928?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
      category: 'Climate',
      readTime: '10 min read',
      author: 'Jennifer Lee',
      authorImage: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1961&q=80',
      publishDate: 'March 5, 2023',
      introduction: 'Air purifiers can significantly improve indoor air quality, but the technology behind them varies widely. This guide examines different filtration technologies—HEPA, activated carbon, UV, and ionization—to help you understand which type of air purifier will best address your specific air quality concerns.',
      sections: [{
        title: 'HEPA Filtration Explained',
        content: "High-Efficiency Particulate Air (HEPA) filters can capture 99.97% of particles as small as 0.3 microns, including dust, pollen, pet dander, and most bacteria. True HEPA filters are ideal for allergy and asthma sufferers but require regular replacement and don't address odors or chemical pollutants."
      }, {
        title: 'Activated Carbon Technology',
        content: 'Activated carbon filters excel at removing odors, smoke, VOCs, and other gaseous pollutants through adsorption. They complement HEPA filters well but have limited capacity and eventually become saturated. The amount and quality of carbon used significantly affects performance.'
      }, {
        title: 'UV Light Purification',
        content: "Ultraviolet germicidal irradiation (UVGI) uses UV-C light to destroy microorganisms like bacteria, viruses, and mold. Most effective when air moves slowly past the UV lamp, this technology works best when combined with other filtration methods and doesn't remove particles or chemicals."
      }, {
        title: 'Ionization and Electrostatic Precipitation',
        content: 'These technologies charge particles so they stick to collection plates or nearby surfaces. While effective at capturing ultrafine particles, some ionizers can produce ozone as a byproduct, which is a lung irritant. Look for models certified to produce minimal or no ozone.'
      }],
      conclusion: "The most effective air purifiers typically combine multiple technologies to address different types of pollutants. Consider your primary air quality concerns—whether that's allergies, odors, or specific contaminants—and choose a purifier with technologies specifically designed to target those issues.",
      relatedGuides: ['9', '6', '5']
    },
    '5': {
      title: 'Smart Oven Features Explained',
      image: 'https://images.unsplash.com/photo-1631679706909-1844bbd07221?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1992&q=80',
      category: 'Kitchen',
      readTime: '14 min read',
      author: 'David Wong',
      authorImage: 'https://images.unsplash.com/photo-1566492031773-4f4e44671857?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
      publishDate: 'February 18, 2023',
      introduction: "Modern smart ovens offer an array of cooking technologies and connected features that can transform your cooking experience. From convection to steam to air frying, this guide explains the various cooking methods available in today's advanced ovens and how they can enhance your culinary results.",
      sections: [{
        title: 'Convection Technology',
        content: 'Convection ovens use fans to circulate hot air, providing faster and more even cooking than conventional ovens. This technology reduces cooking times by about 25%, eliminates the need for rotation, and creates better browning and crisping—ideal for roasting, baking, and dehydrating.'
      }, {
        title: 'Steam Cooking Benefits',
        content: 'Steam ovens inject water vapor into the cooking chamber, preserving moisture and nutrients while cooking food quickly. Particularly excellent for vegetables, fish, and reheating without drying out food, steam ovens can also proof bread dough and create bakery-quality crusts when combined with convection.'
      }, {
        title: 'Air Frying Functionality',
        content: 'Air frying uses high-powered convection with precise temperature control to create crispy exteriors without submerging food in oil. This healthier alternative to deep frying requires little to no added fat while still delivering the crispy texture many recipes demand.'
      }, {
        title: 'Smart Connectivity Features',
        content: 'WiFi-enabled ovens allow remote preheating, temperature adjustments, and monitoring via smartphone apps. Some models include guided cooking programs, recipe libraries, and even cameras to view food without opening the door. Voice control compatibility with systems like Alexa or Google Assistant adds hands-free convenience.'
      }],
      conclusion: 'When choosing a smart oven, prioritize the cooking methods that align with your typical meal preparation. While connected features add convenience, the core cooking technologies will have the greatest impact on your daily food preparation and results. Consider which combination of features will best support your cooking style and common recipes.',
      relatedGuides: ['1', '7', '4']
    },
    '6': {
      title: 'Smart Thermostat Installation Guide',
      image: 'https://images.unsplash.com/photo-1585771724684-38269d6639fd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
      category: 'Climate',
      readTime: '8 min read',
      author: 'Emily Rodriguez',
      authorImage: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1976&q=80',
      publishDate: 'January 30, 2023',
      introduction: 'Replacing your old thermostat with a smart, energy-saving alternative can significantly reduce your utility bills while providing greater comfort and convenience. This step-by-step guide walks you through the installation process, from compatibility checking to setup and optimization.',
      sections: [{
        title: 'Compatibility Assessment',
        content: 'Before purchasing a smart thermostat, check your heating/cooling system compatibility. Most smart thermostats require a common wire ("C-wire") for continuous power. Take a photo of your existing wiring and use manufacturers\' compatibility checkers to confirm your system works with your chosen model.'
      }, {
        title: 'Installation Preparation',
        content: 'Turn off power to your HVAC system at the breaker box before beginning installation. Remove the old thermostat cover, take photos of the wiring configuration, and label wires according to their terminal letters (not their colors, which can vary).'
      }, {
        title: 'Mounting and Wiring',
        content: "Install the mounting plate of your new thermostat, ensuring it's level. Connect the labeled wires to their corresponding terminals on the new thermostat base. If you don't have a C-wire but your thermostat requires one, you may need to install an adapter kit or have an electrician add this wire."
      }, {
        title: 'Setup and Configuration',
        content: "After attaching the thermostat display, restore power to your HVAC system. Follow the on-screen setup instructions to connect to your WiFi network, create an account with the manufacturer's app, and configure your system type, preferences, and initial schedule."
      }],
      conclusion: "Once installed, take time to optimize your smart thermostat's settings based on your schedule and comfort preferences. Most units learn your patterns over time and make automatic adjustments to maximize energy savings. Regular firmware updates will ensure you continue to benefit from new features and improvements.",
      relatedGuides: ['9', '4', '3']
    }
  };
  const guide = guides[id as keyof typeof guides] || guides['1'];
  
  // Set page title
  usePageTitle(guide.title);
  
  // Find related guides data
  const relatedGuidesData = guide.relatedGuides.map(relatedId => {
    const relatedGuide = guides[relatedId as keyof typeof guides];
    return {
      id: relatedId,
      title: relatedGuide?.title || '',
      image: relatedGuide?.image || '',
      category: relatedGuide?.category || ''
    };
  });
  return <div className="w-full bg-white">
      {/* Hero image */}
      <div className="relative w-full h-96">
        <ImageWithLoader src={guide.image} alt={guide.title} className="w-full h-full object-cover" />
        <div className="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
        <div className="absolute bottom-0 left-0 right-0 p-8">
          <div className="container mx-auto">
            <div className="flex items-center mb-2">
              <span className="bg-[#d4a373] text-white text-sm px-2 py-1 rounded">
                {guide.category}
              </span>
              <div className="ml-4 flex items-center text-white">
                <ClockIcon size={16} className="mr-1" />
                <span>{guide.readTime}</span>
              </div>
            </div>
            <h1 className="text-3xl md:text-4xl font-bold text-white mb-2">
              {guide.title}
            </h1>
            <div className="flex items-center text-white text-sm">
              <span>Published: {guide.publishDate}</span>
              <span className="mx-2">•</span>
              <span>By {guide.author}</span>
            </div>
          </div>
        </div>
      </div>
      {/* Breadcrumb */}
      <div className="bg-[#f8f9fa] border-b">
        <div className="container mx-auto px-4 py-3">
          <div className="flex items-center text-sm">
            <Link to="/" className="text-gray-500 hover:text-[#d4a373]">
              Home
            </Link>
            <span className="mx-2 text-gray-400">/</span>
            <Link to="/guides" className="text-gray-500 hover:text-[#d4a373]">
              Buying Guides
            </Link>
            <span className="mx-2 text-gray-400">/</span>
            <span className="text-gray-700">{guide.title}</span>
          </div>
        </div>
      </div>
      {/* Guide content */}
      <div className="container mx-auto px-4 py-8">
        <div className="flex flex-col md:flex-row">
          {/* Main content */}
          <div className="w-full md:w-2/3 md:pr-8">
            {/* Author info */}
            <div className="flex items-center mb-8 pb-6 border-b">
              <ImageWithLoader src={guide.authorImage} alt={guide.author} className="w-12 h-12 rounded-full object-cover mr-4" />
              <div>
                <p className="font-medium">Written by {guide.author}</p>
                <p className="text-sm text-gray-500">
                  {guide.category} Specialist
                </p>
              </div>
            </div>
            {/* Introduction */}
            <div className="prose max-w-none mb-8">
              <p className="text-lg font-medium leading-relaxed">
                {guide.introduction}
              </p>
            </div>
            {/* Guide sections */}
            {guide.sections.map((section, index) => <div key={index} className="mb-8">
                <h2 className="text-2xl font-bold mb-4">{section.title}</h2>
                <p className="text-gray-700 leading-relaxed mb-4">
                  {section.content}
                </p>
                {/* Placeholder for section image */}
                {index % 2 === 0 && <ImageWithLoader src={`https://source.unsplash.com/random/800x400?${guide.category.toLowerCase()},appliance&sig=${index}`} alt={section.title} className="rounded-lg w-full h-64 object-cover my-4" />}
              </div>)}
            {/* Conclusion */}
            <div className="bg-[#f8f9fa] p-6 rounded-lg mb-8">
              <h2 className="text-2xl font-bold mb-4">Conclusion</h2>
              <p className="text-gray-700 leading-relaxed">
                {guide.conclusion}
              </p>
            </div>
            {/* Back to guides */}
            <div className="mt-12 mb-8">
              <Link to="/guides" className="flex items-center text-[#d4a373] hover:underline">
                <ArrowLeftIcon size={16} className="mr-2" />
                Back to all guides
              </Link>
            </div>
          </div>
          {/* Sidebar */}
          <div className="w-full md:w-1/3 mt-8 md:mt-0">
            <div className="bg-[#f8f9fa] p-6 rounded-lg sticky top-24">
              <h3 className="font-bold text-lg mb-4">In This Guide</h3>
              <ul className="space-y-3">
                {guide.sections.map((section, index) => <li key={index} className="flex items-start">
                    <BookOpenIcon size={16} className="text-[#d4a373] mr-2 mt-1 flex-shrink-0" />
                    <span className="text-gray-700">{section.title}</span>
                  </li>)}
              </ul>
              <div className="my-6 border-t border-gray-200 pt-6">
                <h3 className="font-bold text-lg mb-4">Related Guides</h3>
                <div className="space-y-4">
                  {relatedGuidesData.map(relatedGuide => <Link key={relatedGuide.id} to={`/guides/${relatedGuide.id}`} className="flex items-start group">
                      <div className="w-16 h-16 rounded overflow-hidden flex-shrink-0 mr-3">
                        <ImageWithLoader src={relatedGuide.image} alt={relatedGuide.title} className="w-full h-full object-cover" />
                      </div>
                      <div>
                        <span className="text-xs bg-[#e9ecef] text-[#343a40] px-2 py-0.5 rounded">
                          {relatedGuide.category}
                        </span>
                        <p className="text-sm font-medium mt-1 group-hover:text-[#d4a373]">
                          {relatedGuide.title}
                        </p>
                      </div>
                    </Link>)}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>;
}